import React, {useState, useRef,useEffect} from 'react'
// @ts-ignore
import {SlotMachine} from '@lucky-canvas/react'
import {queryRaffleAwardList, draw} from "@/api";

// @ts-ignore
export function SlotMachinePage({handleRefresh}) {

    const [prizes,setPrizes] = useState([{}])
    const myLucky = useRef()

    const queryRaffleAwardListHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const userId = String(queryParams.get('userId'));
        const activityId = Number(queryParams.get('activityId'));
        const result  = await queryRaffleAwardList(userId, activityId);
        const {code, info, data} = await result.json();

        if (code != "0000") {
            window.alert("获取抽奖奖品列表失败 code:" + code + " info:" + info)
            return;
        }

        const prizes = [
            {
                borderRadius: '10px',
                name: data[0].awardTitle,
                fonts: [{ text: data[0].awardTitle,top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1}],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-00.png'
                }]
            },
            {
                borderRadius: '10px',
                name: data[1].awardTitle,
                fonts: [{ text: data[1].awardTitle,top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1 }],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-01.png'
                }]
            },
            {
                borderRadius: '10px',
                name: data[2].awardTitle,
                fonts: [{ text: data[2].awardTitle,top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1}],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-02.png'
                }]
            },
            {
                borderRadius: '10px',
                name: data[3].awardTitle,
                fonts: [{ text: data[3].awardTitle, top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1}],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-12.png'
                }]
            },
            {
                borderRadius: '10px',
                name: data[4].awardTitle,
                fonts: [{ text: data[4].awardTitle, top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1}],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-22.png'
                }]
            },
            {
                borderRadius: '10px',
                name: data[5].awardTitle,
                fonts: [{ text: data[5].awardTitle,top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1}],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-21.png'
                }]
            },
            {
                borderRadius: '10px',
                name: data[6].awardTitle,
                fonts: [{ text: data[6].awardTitle, top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1}],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-20.png'
                }]
            },
            {
                borderRadius: '10px',
                name: data[7].awardTitle,
                fonts: [{ text: data[7].awardTitle, top: '70%', fontSize: '10px', fontWeight: '800',lineClamp: 1}],
                imgs: [{
                    width:"80px",
                    height:"70px",
                    src: '/raffle-award-10.png'
                }]
            },
        ]


        // 设置奖品数据
        setPrizes(prizes)

    }

    const randomRaffleHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const userId = String(queryParams.get('userId'));
        const activityId = Number(queryParams.get('activityId'));

        let result = await draw(userId, activityId);
        const {code, info, data} = await result.json();
        if (code != "0000") {
            window.alert("随机抽奖失败 code:" + code + " info:" + info)
            return;
        }

        handleRefresh()


        // 为了方便测试，mock 的接口直接返回 awardIndex 也就是奖品列表中第几个奖品。
        return data.awardIndex - 1;
    }


    const [defaultStyle] = useState({
       // fontColor: '#090505',
        fontSize: '14px',
        textAlign: 'center',
        background: '#b00a0a',
        shadow: '0 5 1 #ebf1f4'})

    const [defaultConfig] = useState({
         rowSpacing: '15px',
         colSpacing: '15px'
    })

    const [blocks] = useState([

        { padding: '10px', background: '#658c54' },
        { padding: '10px', background: '#ffffff' },
        { padding: '10px', background: '#e5305d' },

        // {imgs: [{
        //         src: '/bg.png',
        //         width: '400px',
        //         top: '110%'
        //     }]}
    ])

    const [slots] = useState([
        {order: [0,1,2,3,4,5,6,7], direction: 1},
        {order: [7,6,5,4,3,2,1,0], direction: -1},
        {order: [3,2,1,0,7,6,5,4],direction: 1},
    ])

    useEffect(() => {
        queryRaffleAwardListHandle().then(r => {
        });
    }, [])


        // @ts-ignore
    return <div>
            <SlotMachine
                ref={myLucky}
                width="300px"
                height="300px"
                prizes={prizes}
                defaultStyle={defaultStyle}
                defaultConfig = {defaultConfig}
                blocks={blocks}
                slots={slots}
                // onEnd={(prize: { name: string; }) => {
                //     alert('恭喜获得大奖:' + prize.name)
                // }}
                onEnd={
                    // @ts-ignore
                    prize => {
                        // 加载数据
                        queryRaffleAwardListHandle().then(r => {
                        });
                        // 展示奖品
                        alert('恭喜抽中奖品💐【' + prize.fonts[0].text+'】')
                    }
                }
            ></SlotMachine>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '45px' }}>
            <button
                style={{
                    padding: '12px 24px', // 内边距
                    fontSize: '18px', // 字体大小
                    fontWeight: 'bold', // 加粗
                    color: '#ffffff', // 文字颜色
                    backgroundColor: '#FFA500', // 背景色
                    borderRadius: '5px', // 边框圆角
                    border: 'none', // 无边框
                    cursor: 'pointer', // 鼠标指针为手型
                    transition: 'background-color 0.3s', // 过渡效果
                }}
                onClick={e => {
                // @ts-ignore
                myLucky.current.play()
                setTimeout(() => {
                    // 抽奖接口
                    randomRaffleHandle().then(prizeIndex => {
                        // @ts-ignore
                        myLucky.current.stop(prizeIndex);
                        }
                    );
                }, 2500)
            }}>摇一把
            </button>
        </div>
        </div>

}

